<template>
  <div class="bulletin-board">
    <div class="bit-title">大屏看板展示</div>
    <Earth3D class="earth" :series="series"></Earth3D>
    <!-- <div id="container"></div> -->
  </div>
</template>

<script lang="ts">
import Earth3D from "@/components/echarts/earth-3d.vue";
import { ref } from 'vue';

export default {
  name: "Demo2",
  setup(props) {
    // 地图数据
    let ds = ref([
      {
        name: "中国",
        point: [116.46, 39.92, 0],
        itemStyleColor: "#f00",
        labelText: "中国•3000",
      },
      {
        name: "印度",
        point: [78.96288, 20.593684, 0],
        itemStyleColor: "#99CC66",
        labelText: "印度•500",
      },
      {
        name: "意大利",
        point: [12.56738, 41.87194, 0],
        itemStyleColor: "#9999FF",
        labelText: "意大利•200",
      },
      {
        name: "新西兰",
        point: [174.885971, -40.900557, 0],
        itemStyleColor: "#339966",
        labelText: "新西兰•10",
      },
      {
        name: "英国",
        point: [-3.435973, 55.378051, 0],
        itemStyleColor: "#993366",
        labelText: "英国•1000",
      },
      {
        name: "德国",
        point: [10.451526, 51.165691, 0],
        itemStyleColor: "#996666",
        labelText: "德国•200",
      },
      {
        name: "美国",
        point: [-95.712891, 37.09024, 0],
        itemStyleColor: "#66CCFF",
        labelText: "美国•2200",
      },
      {
        name: "日本",
        point: [138.252924, 36.204824, 0],
        itemStyleColor: "#666666",
        labelText: "日本•2500",
      },
    ]);
    var geoCoordMap = {
      南宁: [108.479, 23.1152],
      广州: [113.5107, 23.2196],
      重庆: [107.7539, 30.1904],
      芬兰: [24.909912, 60.169095],
      美国: [-100.696295, 33.679979],
      日本: [139.710164, 35.706962],
      韩国: [126.979208, 37.53875],
      瑞士: [7.445147, 46.956241],
      东南亚: [117.53244, 5.300343],
      澳大利亚: [135.193845, -25.304039],
      德国: [13.402393, 52.518569],
      英国: [-0.126608, 51.208425],
      加拿大: [-102.646409, 59.994255],
    } as any;
    var convertData = function (data: Array<any>) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[1].name];
        var toCoord = geoCoordMap[dataItem[0].name];
        if (fromCoord && toCoord) {
          res.push([fromCoord, toCoord]);
        }
      }
      return res;
    };

    const series = ref([
      {
        type: "lines3D",
        effect: {
          show: true,
          period: 3, //速度
          trailLength: 0.1, //尾部阴影
        },
        lineStyle: {
          //航线的视图效果
          color: "red",
          width: 1,
          opacity: 0.6,
        },
        data: convertData([[{ name: "重庆" }, { name: "英国", value: 70 }]]), // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
      },
      {
        type: "lines3D",
        effect: {
          show: true,
          period: 3, //速度
          trailLength: 0.1, //尾部阴影
        },
        lineStyle: {
          //航线的视图效果
          color: "#9ae5fc",
          width: 1,
          opacity: 0.6,
        },
        data: convertData([
          [{ name: "南宁" }, { name: "加拿大", value: 80 }],
          [{ name: "南宁" }, { name: "美国", value: 100 }],
          [{ name: "南宁" }, { name: "澳大利亚", value: 95 }],
          [{ name: "南宁" }, { name: "瑞士", value: 50 }],
        ]), // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
      },
    ]);

    return {
      series
    };
  },
  mounted: function () {
    
  },
  components: {
    Earth3D,
  },
};
</script>
<style lang="scss" scoped>
.bulletin-board {
  // width: 100vh;
  height: 100vh;
  background: #041427;

  .bit-title {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: white;
    padding-top: 20px;
  }
}
.earth {
  width: 50%;
  height: 50%;
}
</style>
